$mobile: 480px;
$tablet: 769px;
$desktop: 1024px;
$widescreen: 1216px;
$fullhd: 1408px;
$ultrawide: 1960px;

@mixin from($device) {
    @media screen and (min-width: $device) {
        @content;
    }
}

@mixin until($device) {
    @media screen and (max-width: $device - 1px) {
        @content;
    }
}

@mixin mobile {
    @media screen and (max-width: $tablet - 1px) {
        @content;
    }
}

@mixin tablet {
    @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
        @content;
    }
}

@mixin desktop {
    @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
        @content;
    }
}

@mixin widescreen {
    @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {
        @content;
    }
}

@mixin fullhd {
    @media screen and (min-width: $fullhd) {
        @content;
    }
}
